import useSw from "../../Share/useSw";
import { getGd } from "../../request/index";
import { useEffect, useState } from "react";
import { BellOutline } from "antd-mobile-icons";
import { SearchBar, Tabs } from "antd-mobile";
import MyTabbar from "../../Share/MyTabbar";
import "./Home.css";
import { useNavigate } from "react-router-dom";
import { getHome } from "../../request/index";
function Home() {
  const [homegd, setHomegd] = useState<any[]>([]);
  const [homesj, setHomesj] = useState<any[]>([]);
  useEffect(() => {
    getGd().then((res) => {
      console.log(res);
      setHomegd(res.data.city);
    });
    getHome().then((res) => {
      console.log(res);
      setHomesj(res.data.data);
    });
  }, []);
  const navigate = useNavigate()
  useSw();
  return (
    <div>
      <h3 style={{ margin: "10px" }}>您的位置</h3>
      <h2 style={{ margin: "10px" }}>{homegd}</h2>
      <BellOutline className="ld" />
      <SearchBar className="Home-search" placeholder="搜索" />
      <Tabs className="Home-tabs" activeLineMode="fixed">
        <Tabs.Tab title="全部" key="fruits" className="Home-tabs1">
          <div className="dm">
            <h3>即将开展</h3>
            <h3 style={{color:"rgb(185, 188, 185)"}} onClick={()=>navigate('/list')}>查看所有</h3>
          </div>
          <div className="zl">
            {homesj.map((item) => {
              return (
                <>
                  <img className="img" src={item.imgPath} alt="" />
                </>
              );
            })}
          </div>
        </Tabs.Tab>
        <Tabs.Tab title="音乐会" key="vegetables">
          音乐会
        </Tabs.Tab>
        <Tabs.Tab title="研讨会" key="animals">
          研讨会
        </Tabs.Tab>
        <Tabs.Tab title="剧院" key="animalsa">
          剧院
        </Tabs.Tab>
      </Tabs>
      <MyTabbar />
    </div>
  );
}

export default Home;
